<!--运营维护成本-->
<template>
  <div style="font-size: 20px;">
    <img src="../../../../assets/image/jianshe/title.png" alt="">
    运营维护成本
  </div>
  <div class="w-100 h-100" style="">
    <div class="bottom">
      <div id="yywhcb" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { useOptions } from "@/hook/useOptions";

const colorSingleList = [
  "rgba(184, 235, 143, 1)",
  "rgba(3, 230, 254, 1)",
];


const value = useOptions().nowYear();
const options = [
  {
    value: "2023",
    label: "2023",
  },

];

const offsetX = 10;
const offsetY = 5;
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx:any, shape) {
    // 会canvas的应该都能看得懂，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - offsetX, shape.y - offsetY];
    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
  },
});

// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx:any, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x, shape.y];
    const c2 = [xAxisPoint[0], xAxisPoint[1]];
    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
    const c4 = [shape.x + offsetX, shape.y - offsetY];
    ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
  },
});

// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx:any, shape) {
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
    const c3 = [shape.x, shape.y - offsetX];
    const c4 = [shape.x - offsetX, shape.y - offsetY];
    ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
  },
});

// 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);



const props = defineProps({  allData: {
    type: Object,
    default: () => ({}),
  },
  selectValue: {
    default: 2024,
  },
});
const jsonData:any = inject('jsonData')
const current = computed(() => {
  let data = [];
  try {
    data = props.allData[props.selectValue];
  } catch (error) {}
  return data;
});
let myChart1:any

watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart1.setOption({
        series: [{ data: val}],
      });
    }
  }
);

onMounted(() => {
  let option = {
    background: 'trasparent',
    tooltip: {
      show: false,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "rgba(255,255,255,0.75)",
      extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
      textStyle: {
        fontSize: 14,
        color: "#000",
      },
      formatter: (params:any, ticket:any, callback:any) => {
        const item = params[1];
        return item.name + " : " + item.value + " 个";
      },
    },
    grid: {
      left: "1%",
      right: "0%",
      top: "16%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['污水收集完善', '源头小区海绵建设', '面源污染控制', '内源治理及生态修复', '内涝防治'],
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#667A8E'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0, // 显示所有标签
        formatter: function (value:any) {
          // 将每个标签中的文本按每四个字符进行分割并加上换行符
          return value.match(/.{1,4}/g).join('\n');
        },
        // 调整标签样式，确保换行显示不会导致标签相互重叠
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        }
      }
    },
    yAxis:{
      name: '万元',
      type: 'value',
      nameTextStyle: {
        color: '#fff',
        fontWeight: 400,
        fontSize: 14
      },
      axisLine: {
        show: false,
        lineStyle: {
          width: 1,
          color: '#667A8E'
        }
      },
      splitLine: { // 配置分割线
        show: true,
        lineStyle: {
          color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
          type: 'solid' // 实线
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 20,
        color: '#667A8E',
        formatter: "{value}" + '',
      }
    },
    series: [
      {
        type: "custom",
        renderItem: (params:any, api:any) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#B8EB8F',
                    },
                    {
                      offset: 0.35,
                      color: '#B8EB8F'
                    },
                    {
                      offset: 1,
                      color: 'transparent'
                    }
                  ]),
                },
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#B8EB8F',
                    },
                    {
                      offset: 0.35,
                      color: '#B8EB8F'
                    },
                    {
                      offset: 1,
                      color: 'transparent'
                    }
                  ]),
                },
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: '#B8EB8F'
                },
              },
            ],
          };
        },
        data: [],
      },
    ],
  };
  const dom:any = document.getElementById("yywhcb")
  dom.removeAttribute('_echarts_instance_')
  myChart1 = echarts.init(dom as HTMLElement);

  myChart1.setOption(option);
});
</script>

<style lang="less" scoped>

.bottom {
  width: 100%;
  height: 84%;
  display: flex;
}
</style>
